<template>
  <div>
    <div>
    <span>
      <el-input style="width: 500px; position: relative; left: 20px"
                type="text"
                icon="Search"
                autocomplete="off"
                autocorrect="off"
                autocapitalize="off"
                autofocus
                v-model="NameOrStudentAccount"
                ref='searchInput'
                spellcheck="false"
                placeholder="搜索..."
                @change="getAllNoticeType"
                clearable
      />
        <el-button
            style="position: relative; left: 20px"
            @click="getAllNoticeType"
            :icon="search"
            type="primary"
        >搜索
        </el-button>
      </span>
    </div>
    <div>
      <el-table
          row-key="id"
          :data="StudentMessage"
          border style="width: 100%"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}">

        <el-table-column prop="accountNo" label="学号" width="120"/>
        <el-table-column prop="name" label="姓名" width="100"/>
        <el-table-column :filters="[
        { text: '男', value: '男' },
        { text: '女', value: '女' },
      ]"
       :filter-method="sexFilterHandler"
       :filter-multiple="false"
       prop="sex" label="性别" width="70"/>

        <el-table-column prop="className" label="班级" width="180"/>
        <el-table-column :filters="[
        { text: '边志巧', value: '边志巧' },
        { text: '智与慧', value: '智与慧' },
      ]"

       :filter-method="instructorFilterHandler"
       prop="instructorName" label="辅导员" width="100" />
    <el-table-column prop="contact" label="联系方式" width="120" />
    <el-table-column prop="qq" label="QQ号" width="120" />
    <el-table-column prop="birthdate" label="出生日期" width="120" />
    <el-table-column prop="polstatus" label="政治面貌" width="120" />
    <el-table-column prop="politicalAppearanceAddedTime" label="加入时间" width="120" />
    <el-table-column prop="thnic" label="民族" width="70" />
    <el-table-column prop="idnumber" label="证件号" width="200" />
    <el-table-column prop="foreignLanguage" label="外语类别" width="90" />
    <el-table-column prop="comprehensiveAssessmentRanking" label="综测排名" width="90" />
    <el-table-column prop="scoreRanking" label="成绩排名" width="90" />

    <el-table-column prop="notes" label="备注" width="180" />

    <el-table-column align="center" fixed="right" prop="operate" label="操作" width="150">
      <template v-slot="scope">
        <el-button
            size="small"
            type="primary" icon="Edit"
            @click="detailedInformation1(scope)"
        >查看详情
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

  <el-dialog
      v-model="detailedInformation"
      :close-on-click-modal="false"
      title="学生详细信息"
      width="850px">
    <information v-if="detailedInformation" ref="dialog"/>
  </el-dialog>
    <div class="footer">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[15, 30 , 60 ,  100 , 200 , 500 , 1000 , 2000 , 5000]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

    </div>
  </div>
</template>

<script>
import request from "@/util/request.js";
import Information from "@/template/Information.vue";
import search from "@element-plus/icons/lib/Search.js";

export default {
  components: {Information},
  computed: {
    search() {
      return search
    },
  },

  data() {
    return {
      detailedInformation: false,
      StudentMessage: [],
      information: {},
      NameOrStudentAccount: "",
      command: '全部',
      pageNum: 1, //页码
      pageSize: 15,  //页长
      total: 0,  //总表长
      instructorNameAll: [],
      instructorName: [],
      text :"" ,
      value: "",
    };
  },
  //初始化加载
  created() {
    console.log("初始化加载方法");
    this.getAllNoticeType(); //加载所有学生的所有信息
    this.getAllInstructorName(); //加载所有辅导员名字
  },
  methods: {
    detailedInformation1(scope) {
      this.information = scope.row
      this.detailedInformation = true
      window.getTemplateData = (callback) => {
        this.getTemplateData(callback);
      }
    },
    getTemplateData(callback) {
      callback(this.information);
    }, //获取文书数据

    //单独获取辅导员信息做筛选
    getAllInstructorName() {
      request.get("/info_instructor/all").then(res => {
        if (res.data.code === '200') {
          console.log(res.data)
          this.instructorNameAll = res.data.data;
          for(let i = 0; i < this.instructorNameAll.length; i++){
            console.log(this.instructorNameAll.at(i).instructorName)
            this.text=this.instructorNameAll.at(i).instructorName
            this.value=this.instructorNameAll.at(i).instructorName
            this.instructorName.push(this.text,this.value)
            console.log(this.instructorName)
          }
        } else {
          console.log("错误")
        }
      })
    },
    //按学号或姓名模糊查询学生/获取所有学生信息
    getAllNoticeType() {
      request.get("/info_account/page?name=" + this.NameOrStudentAccount + "&accountNo=" + this.NameOrStudentAccount + "&pageNum=" + this.pageNum + "&pageSize=" + this.pageSize).then(res => {
        if (res.data.code === '200') {
          console.log(res.data.data)
          for (let key in res.data.data) {
            if (key === "records") {
              this.StudentMessage = res.data.data[key];
            } else if (key === "total") {
              this.total = res.data.data[key];
            }
          }
        } else {
          console.log("服务端错误")
        }
      })
    },
    sexFilterHandler(value, row) {
      console.log(row.sex)
      return row.sex === value;
    },
    instructorFilterHandler(value, row) {
      console.log(row.instructorName)
      return row.instructorName === value;
    },
    //表尾分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllNoticeType();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getAllNoticeType();
    },
  }
};

</script>


<style scoped>
table {
  border-collapse: collapse;
  text-align: center;
  vertical-align: middle;
  font-family: "宋体", SimSun;
}

th, td {
  border: 1px solid black;
  padding: 10px 0;
  font-family: "Times New Roman", Times, serif;
}

</style>